<template>
  <div class="product">
    <div @click="goBack"> 返回 </div>
    <div>{{product.name}}</div>
    <img style="width:750rem;" @touchend="touchend" v-for="img in product.imgs" :key="img" :src="img" />
    <div>
      <div>{{product.name}}</div>
      <span>{{minPrice}}</span>
    </div>
    <div>
      <div>
        <span class="salePrice">{{product.skus[skuIndex].salePrice}}</span> <span class="originalPrice" v-if="product.skus[skuIndex].originalPrice">{{product.skus[skuIndex].originalPrice}}</span>
      </div>
      <div :class="{sku:true,active:index == skuIndex}" @click="changeSku(index)" v-for="sku,index in product.skus" :key="sku.skuId">
        {{sku.props}}
      </div>
    </div>
    <div v-html="product.content"></div>
  </div>
</template>

<script>


import api from '../api/index'
export default {
  name: 'product',
  components: {
    
  },
  data(){
    return {
      minPrice:100000,
      skuIndex:0,
      product:{

      }
    }
  },
  methods:{
    changeSku(index){
      this.skuIndex = index
    },
    goBack(){
      this.$router.back()
    },
    touchend(event){
      console.log(event)
    }
  },
  created(){
    // console.log(query)
  },
  mounted(){
    let query = this.$route.query
    let productId = query.productId
    this.$http({
      url:'/product?productId=' + productId
    }).then(product => {
      product.imgs = product.imgs.split(',')
      for(let i = 0; i < product.imgs.length; i ++){
        product.imgs[i] = api.baseURL + product.imgs[i]
      }
      for(let i = 0; i < product.skus.length; i ++){
        if(product.skus[i].salePrice < this.minPrice){
          this.minPrice = product.skus[i].salePrice
        }
      }
      this.product = product
    })
  }
}
</script>

<style scoped>
  .product{
    font-size:36rem;
  }
  .salePrice{
    color: #ff0000;
    font-size:40rem;
  }
  .originalPrice{
    text-decoration: line-through;
    color: #ccc;
  }
  .sku{
    background:#e1e1e1;
  }
  .sku.active{
    color: #ff0000;
    border:1px solid #ff0000;
    background:#fff;
  }
</style>